{{template "shared/bootstraptablejs.html"}}
<script src="/static/plugins/echarts/echarts.min.js"></script>
<script src="/static/plugins/echarts/theme/macarons.js"></script>

<script>
    var $dataGrid = $('#dataGrid');
    var $searchForm = $("#searchForm");

    var rowsChart = echarts.init(document.getElementById('rowsChart'), 'macarons');

    //高亮显示id
    var highlightPk = null;

    //初始化加载
    $(function () {
        pageInit();
    });

    //初始化页面
    function pageInit() {
        //初始化查询条件
        queryParamsInit();

        //初始化表格
        dataGridInit();

        echartsInit();

        //搜索
        $("#btnSearch").on("click", function (e) {
            refreshToFirstPage();

            collectRowsQuery();
        });

        //清除搜索
        $("#btnClearSearch").on("click", function (e) {
            $('select', $searchForm).selectpicker('val', '');
            $('input', $searchForm).val('');

            refreshToFirstPage();
        });

        //绑定加载成功的事件，成功后高亮显示当前项
        $dataGrid.on('load-success.bs.table', function () {
            if (highlightPk !== null && typeof highlightPk !== 'undefined') {
                sdtheme.highlight($dataGrid.find('tbody tr[data-pk="' + highlightPk + '"]'));
            }
            //高亮显示一次后失效
            highlightPk = null;
        });

        //保持搜索条件面板状态
        sdtheme.searchPanelStatusInit('searchpanelbtn');
    }

    //查询条件初始化
    function queryParamsInit() {
        //从cookie加载查询条件，传入参数为form id
        sdtheme.loadSearchText('searchForm');

        if(typeof($("#DTU_no").val()) == 'undefined'){
            $('.searchForm input[name="DTU_no"]').val('900000000001');
            $('.searchForm input[name="MeterAddress"]').val(1);
        }

        layui.use('laydate', function () {
            var laydate = layui.laydate;

            var cur = new Date();
            var month = (100 + cur.getMonth() + 1 + '').substring(1);
            var result = cur.getFullYear() + '-' + month + '-01 - ' + cur.format('yyyy-MM-dd') ;

            laydate.render({
                elem: '#CollectDate',
                range: true,
                //yyyy-MM-dd - yyyy-MM-dd
                value: result,
                max: 0
            });
        });
    }

    //刷新当前页
    function refresh(pk) {
        $dataGrid.bootstrapTable('refresh');
        highlightPk = pk;
    }

    //刷新并跳转至第一页
    function refreshToFirstPage() {
        //表格刷新时，保存查询条件到cookie
        sdtheme.saveSearchText('searchForm');

        //刷新并跳转至第1页
        $dataGrid.bootstrapTable('refresh', {pageNumber: 1});

        //同时要更新cookie里保存当前页码
        $.cookie('dataGrid.bs.table.pageNumber', 1, {expires: 1});
    }

    //bootstrap table data init
    function dataGridInit() {
        $dataGrid.bootstrapTable({
            method: 'post',
            url: '{{ urlfor "TotalDtuRowsController.DataGrid"}}',
            sidePagination: 'server',  //服务器端用 server
            idField: 'CollectDate',    //标识哪个字段为id主键
            striped: true,             //使表格带有条纹
            queryParamsType: 'limit',   //参数格式,发送标准的RESTFul类型的参数请求
            queryParams: function (params) {
                params.CollectDate  = $('.searchForm input[name="CollectDate"]').val();
                params.DTU_no       = $('.searchForm input[name="DTU_no"]').val();
                params.MeterAddress = $('.searchForm input[name="MeterAddress"]').val();
                return params;
            },
            pagination: true,      //在表格底部显示分页工具栏
            showRefresh: true,     //显示刷新按钮
            showColumns: true,     //显示隐藏列
            toolbar: '#toolbar',    //设置工具栏的Id或者class
            pageSize: 10,
            pageList: [5, 10, 20, 100, 200],
            paginationShowPageGo: true,    //20170812 lht 扩展select跳转
            paginationUseBSSelect: true,   //20170812 lht 扩展select跳转 启用BoostrapSelect(页面须引用botstrap-select.min.js)
            cookie: true,
            classes: 'table table-bordered table-hover',
            undefinedText: '',
            sortName: 'CollectDate',
            sortOrder: 'asc',
            stickyHeader: true,
            resizable: true,

            columns: [
                {
                    field: 'CollectDate',
                    title: '采集日期',
                    width: '120px',
                    align: 'center',
                    sortable: true,
                    formatter: sdtheme.formatterDateBySpan
                }, {
                    field: 'DTU_no',
                    title: 'DTU编号',
                    align: 'center',
                    width: '120px',
                    sortable: true
                }, {
                    field: 'MeterAddress',
                    title: '电表地址',
                    width: '110px',
                    align: 'center',
                    sortable: true
                }, {
                    field: 'NeedRows',
                    title: '应采条数',
                    width: '110px',
                    align: 'center'
                }, {
                    field: 'Rows',
                    title: '实采条数',
                    width: '110px',
                    align: 'center'
                }, {
                    field: 'Rate',
                    title: '实采比率',
                    width: '110px',
                    align: 'center',
                    formatter: sdtheme.showTableRate
                }
                ],
            onLoadSuccess: function (data) {
                layer.closeAll('loading');
            },
            onSort: function (name, order) {

            },
            onPageChange: function () {

            },
            onCheckAll: function (rows) {

            },
            onCheck: function (rows) {

            },
            onUncheck: function (rows) {

            },
            onUncheckAll: function () {

            },
            onLoadError: function (status) {
                layer.alert('获取数据失败,错误代码：' + status);
            },
            onDblClickRow: function (item) {
                var info = '采集日期：' + new Date(item.CollectDate).format('yyyy-MM-dd') + '<br/>' +
                        'DTU编号：' + item.DTU_no + '<br/>' +
                        '电表地址：' + item.MeterAddress + '<br/>' +
                        '应采条数：' + item.NeedRows + '<br/>' +
                        '实采条数：' + item.Rows + '<br/>' +
                        '实采比率：' + item.Rate + '%<br/>'
                        ;
                layer.alert(info);
            }
        });
    }

    function echartsInit(){
        var icon = 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z';
        var option = {
            title: {
                left: 'center',
                text: '终端采集条数',
                subtext: '参考值：5分钟一条，每天/288条'
            },

            tooltip: {
                trigger: 'axis'
            },

            grid: {
                left: '3%',
                right: '3%',
                bottom: '15%',
                containLabel: true
            },

            //下栏拉动条
            dataZoom: [{
                type: 'inside',
                start: 0
            }, {
                start: 0,
                handleIcon: icon,
                handleSize: '80%',
                handleStyle: {
                    color: '#fff',
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                }
            }],

            //开关
            legend: {
                left: 'right',
                data:['应采条数','实际条数']
            },

            //右侧工具栏
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },

            xAxis: {
                type: 'category',
                data: []
            },

            yAxis: [{
                type:"value"
            }],

            series: [
                {
                    name: '应采条数',
                    type: 'bar',
                    barMaxWidth: 30,
                    data: []
                },{
                    name: '实际条数',
                    type: 'bar',
                    barMaxWidth: 30,
                    data: []
                }
            ]
        };
        rowsChart.setOption(option);
    }

    function collectRowsQuery() {
        rowsChart.showLoading();
        var url = '{{ urlfor "TotalDtuRowsController.DataList"}}';
        var params ={CollectDate: $('.searchForm input[name="CollectDate"]').val(),
            DTU_no: $('.searchForm input[name="DTU_no"]').val(),
            MeterAddress: $('.searchForm input[name="MeterAddress"]').val()
        };

        $.sdpost(url, params, function (re) {
            if (re.code === 0) {
                rowsChart.hideLoading();

                rowsChart.setOption({
                    xAxis: {
                        data: re.obj.map(function (item) {
                            return new Date(item.CollectDate).format('yyyy-MM-dd');
                        })
                    },
                    series:[
                        {
                            data: re.obj.map(function (item) {
                                return item.NeedRows;
                            })
                        },
                        {
                            data: re.obj.map(function (item) {
                                return item.Rows;
                            })
                        }
                    ]
                });

            }
        });
    }


</script>